$(function(){
	var index = 0;
	var srcArr =["images/800_800_b_web1565602841583.jpg","images/800_800_1563504284133mp.png","images/800_800_1563504260800.png","images/800_800_1563504264584.png","images/800_800_1563504267971.png","images/800_800_1563504270514.png","images/800_800_1563504272733.png","images/800_800_1563504275455.png"]
	var color="幻夜黑",copy="全网通 8GB+12GB",combo="荣耀无忧服务";
$(".img-list > .arrow-l").on("click",function(){
	
	if(index> 0){
		index--;
	var left = -index*74;
	console.log(left,index,"l");
	
	$(".img-list .img-sm ul").eq(0).css({
		"left":left+"px"
		
	})
	}
})
$(".img-list > .arrow-r").on("click",function(){
	
	if(index < 3){
		index++;
	var left = -index*74;
	console.log(left,index,"r");
	$(".img-list .img-sm ul").eq(0).css({
		"left":left+"px"
	})
	}
});
$(".img-list .img-sm ul li").hover(function(){
	$(this).css({
		"border-color":"red"
	}).siblings().css({
		"border-color":"white"
	});
	$(".img-show").eq(0).children().eq(0).attr({"src":srcArr[$(this).index()]});
	index = $(this).index();
	console.log(srcArr[$(this).index()]);
	
})



$("#add").on("click",function(){
	var val = Number($("#val").eq(0).val());
	val++
	$("#val").eq(0).val(val);
})
$("#substract").on("click",function(){
	var val = Number($("#val").eq(0).val());
	if(val>1){
	val--
	$("#val").eq(0).val(val);
	}
})

$(".car-l").eq(0).siblings().on("click",function(){
	localStorage.price = "1200";
	localStorage.color = 'red';
	localStorage.amount = $("#val").eq(0).val();
//	var detail = [{
//		id:213e21,
//		color:red,
//		num:12,
//		price:1200
//		title:""
//	},{},{}];
	var obj ={};
	obj.id = $(".id-code").text();
	obj.price = 2199.00;
	obj.color = color;
	obj.combo =combo;
	obj.num = $("#val").eq(0).val();
	obj.title = "荣耀9X PRO 麒麟810液冷散热 4000mAh超强续航 4800万超广角夜拍三摄 6.59英寸升降全面屏";
	var detail =[];
	detail.push(obj);
	var json = JSON.stringify(detail);
	localStorage.detail=json;

	
})
$(".car-l").eq(0).siblings().hover(function(){
	console.log(11);
	$(this).css({
		"opacity":"0.5"
	})	
})
$(".car-l").eq(0).siblings().mouseleave(function(){
	$(this).css({
		"opacity":"1"
	})	
})
$(".grant-detail > i").hover(function(){
	$(this).css({
		
	})
	$(this).next().css({
		"display":"block",
		"top":$(this).position().top + $(this).height(),
		"left":$(this).position().left,
		
	}).siblings(".grant-server-list").css({
		"display":"none"
	})
	console.log($(this).position().left);
})
$(".grant-server-list").mouseleave(function(){
	$(this).css({
		"display":"none"
	})
	console.log($(this).position().top + $(this).height(),"leave")
})
$(".grant").mouseleave(function(){
	$(".grant-server-list").css({
		"display":"none"
	})
	//console.log($(this).position().top + $(this).height(),"leave")
})
//$(".grant-server-list").hover(function(){
//	$(this).css({
//		"display":"block",
//		"top":$(this).prev().position().top + $(this).prev().height(),
//		"left":$(this).position().left
//	})
//	
//})

$(".recommend-detail > i").hover(function(){
	$(this).children().css({
		"color":"#ca141d"
	})
	console.log("111")
})
$(".recommend-detail > i").on("mouseleave",function(){
	$(this).children().css({
		"color":"#3a3a3a"
	})
})



$(".img-show").hover(function(e){
	console.log("hover");
	$(".mask").css({"display":"block"
//	"left":e.pageX-$(".img-show").offset().left,
//	"top":e.pageY-$(".img-show").offset().top
	})
//	var left =e.pageX-$(".img-show").offset().left; 
//	var top = e.pageY-$(".img-show").offset().top
//	var maskH = $(".mask").height()/2;
//	var maskW = $(".mask").width()/2;
//	var imgH = $(".img-show > img").height()/2;
//	var imgW = $(".img-show > img").width()/2;
//	var bigH = $(".big").height()/2;
//	var bigW = $(".big").width()/2;
//	var imgleft = left > maskW ? (left < (imgW*2 -maskW) ? left :imgW*2 - maskW*2 ):0;
//	var imgtop = top > maskH ?(top <(imgH*2 - maskH) ? top : imgH*2 -maskH*2):0;
//	$(".mask").css({"display":"block",
//	"left":imgleft,
//	"top":imgtop
//	})
	
$(".big").css({
	"display":"block"
})
var img = document.createElement("img");
img.src = srcArr[index];
$(".big").eq(0).append(img);

})
$(".img-show").on("mousemove",function(e){
	var left =e.pageX-$(".img-show").offset().left; 
	var top = e.pageY-$(".img-show").offset().top
	var maskH = $(".mask").height()/2;
	var maskW = $(".mask").width()/2;
	var imgH = $(".img-show > img").height()/2;
	var imgW = $(".img-show > img").width()/2;
	var bigH = $(".big").height()/2;
	var bigW = $(".big").width()/2;
	var imgleft = left > maskW ? (left < (imgW*2 -maskW) ? left-maskW :imgW*2 - maskW*2 ):0;
	var imgtop = top > maskH ?(top <(imgH*2 - maskH) ? top - maskH : imgH*2 -maskH*2):0;
	$(".mask").css({"display":"block",
	"left":imgleft,
	"top":imgtop
	})
	//var imgleft/x = maskW/imgW = bigH/400;
	//imgleft/x = (imgw*2-maskw*2)/(800-bigw*2)
	//var x = imgleft/(maskW/imgW);
	//var y = imgtop/(maskH/imgH);
	var x = imgleft/((imgW-maskW)/(400-bigW));
	var y = imgtop/((imgH-maskH)/(400-bigH));
	$(".big>img").css({
		"position":"absolute",
		"left":-x,
		"top":-y
	})
	
	
	
	
})
$(".img-show").on("mouseleave",function(e){
	$(".big").css({
		"display":"none"
	})
	$(".mask").css({
		"display":"none"
	})
	$(".big>img").remove();
})

$(".group-click").children("i").on("click",function(){
	$(this).css({
		"border-color":"red"
	}).siblings().css({
		"border-color":"#cccccc"
	});
	var index1=$(".group-click").index($(this).parent().eq(0));
	switch(index1){
		case 0:{
			var color1 = $(this).text();
			color = trimspace(color1)
			break;
		}
		case 1:{
			var copy1 = $(this).text();
			copy = trimspace(copy1);
			break;
		}
		case 2:{
			var combo1 = $(this).text();
			combo = trimspace(combo1);
			break;
		}
	}
	var str = color +"/"+copy+"/"+combo;
	$(".chosed-detail>i").html(str)
})

function int(){
	$(".group-click").each(function(index,val){
		$(this).children("i").eq(0).css({
			"border-color":"red"
		})
	})
}
int();
function trimspace(str){
				var reg = /^\s*|\s*$/g;
				var str1=str.replace(reg,"");
				return str1;
			}




})
